<!--<template>-->
<!--  <div class="centerRight">-->
<!--    <div class="bg-color-black">-->
<!--      <div class="d-flex pt-2 pl-2">-->
<!--        <span>-->
<!--          <i class="iconfont icon-vector" />-->
<!--        </span>-->
<!--        <div class="d-flex">-->
<!--          <span class="fs-xl text mx-2">任务完成排行榜</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="d-flex mt-1 jc-center body-box">-->
<!--        <dv-scroll-board class="dv-scr-board" :config="config" />-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { defineComponent, reactive } from 'vue'-->
<!--export default defineComponent({-->
<!--  setup() {-->
<!--    const config = reactive({-->
<!--      header: ['组件', '分支', '覆盖率'],-->
<!--      data: [-->
<!--        ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],-->
<!--        ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],-->
<!--        ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],-->
<!--        ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],-->
<!--        ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],-->
<!--        ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],-->
<!--        ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],-->
<!--        ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],-->
<!--        ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],-->
<!--        ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]-->
<!--      ],-->
<!--      rowNum: 7, //表格行数-->
<!--      headerHeight: 35,-->
<!--      headerBGC: '#0f1325', //表头-->
<!--      oddRowBGC: '#0f1325', //奇数行-->
<!--      evenRowBGC: '#171c33', //偶数行-->
<!--      index: true,-->
<!--      columnWidth: [50],-->
<!--      align: ['center']-->
<!--    })-->
<!--    return { config }-->
<!--  }-->
<!--})-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--$box-height: 410px;-->
<!--$box-width: 300px;-->
<!--.centerRight {-->
<!--  padding: 16px;-->
<!--  padding-top: 20px;-->
<!--  height: $box-height;-->
<!--  width: $box-width;-->
<!--  border-radius: 5px;-->
<!--  .bg-color-black {-->
<!--    height: $box-height - 30px;-->
<!--    border-radius: 10px;-->
<!--  }-->
<!--  .text {-->
<!--    color: #c3cbde;-->
<!--  }-->
<!--  .body-box {-->
<!--    border-radius: 10px;-->
<!--    overflow: hidden;-->
<!--    .dv-scr-board {-->
<!--      width: 270px;-->
<!--      height: 860px;-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->


<template>
  <div class="centerRight">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-vector"/>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2 ">包裹分拣列表</span>
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoard" @click.self="handleCellClick">
        </dv-scroll-board>
      </div>
    </div>
  </div>
</template>

<script>

// export default defineComponent({
//   setup() {
//     const config = reactive({
//       header: ['A#', 'pn', '报警', '实时'],
//       data: [],
//       rowNum: 10, //表格行数
//       headerHeight: 35,
//       headerBGC: '#0f1325', //表头
//       oddRowBGC: '#0f1325', //奇数行
//       evenRowBGC: '#171c33', //偶数行
//       index: false,
//       columnWidth: [55, 60, 130, 100],
//       align: ['center'],
//       waitTime: 200
//     })
//     // data 渲染到模板时用到的数据
//     const data = reactive({
//       // 从 localStorage 读取数据
//       list: JSON.parse(localStorage.getItem('listData') || '[]'),
//     })
//
//
//     const scanEquipmentMsg = reactive<ScanEquipmentMsg>({
//       scanEquipment_PlcPnStatus: [true, false, true, false, false, false, false, false, true, false, false, false, false, false],
//       scanEquipment_PlcErrStatus: [0, 1, 2, 3, 4, 5, 6, 7, 1, 1, 2, 2, 3, 4],
//       scanEquipment_PlcRealTimeStatus: [1, 0, 1, 0, 1, 5, 4, 2, 3, 4, 5, 1, 2, 0],
//     });
//
//
//     const getStatusColor = (status: number) => {
//       const colorMap = {
//         0: 'green',
//         1: 'yellow',
//         2: 'red',
//       };
//       return colorMap[status] || 'red';
//     }
//
//     const errStatusMapping = ["正常", "急停", "一段光幕报警", "二段光幕报警", "一段伺服报警", "二段伺服报警", "三段伺服报警", "四段伺服报警"];
//     const realTimeStatusMapping = ["一段有件", "二段有件", "三段有件", "四段有件", "一段光幕有件", "二段光幕有件"];
//
//
//     for (let i = 0; i < scanEquipmentMsg.scanEquipment_PlcPnStatus.length; i++) {
//       const pnStatus = scanEquipmentMsg.scanEquipment_PlcPnStatus[i] ? '在线' : '离线';
//       const errStatus = errStatusMapping[scanEquipmentMsg.scanEquipment_PlcErrStatus[i]] || '未知状态';
//       const realTimeStatus = realTimeStatusMapping[scanEquipmentMsg.scanEquipment_PlcRealTimeStatus[i]] || '未知状态';
//
//       const rowData = [`A${i + 1}`, pnStatus, `<span style="color: ${getStatusColor(scanEquipmentMsg.scanEquipment_PlcErrStatus[i])};" title="${errStatus}">${errStatus}</span>`, realTimeStatus];
//       console.log("666666rowData", rowData)
//       config.data.push(rowData);
//
//     }
//
//
//     const handleCellClick = (event) => {
//       const {row, columnIndex, ceil} = event;
//
//       console.log("121313131" + event)
//       var dummyElement = document.createElement('div');
//       dummyElement.innerHTML = row;
//       var rowText = dummyElement.textContent || dummyElement.innerText;
//
//       var dummyElementCell = document.createElement('div');
//       dummyElementCell.innerHTML = ceil;
//       var cellText = dummyElementCell.textContent || dummyElementCell.innerText;
//
//       // 在这里你可以弹出一个窗口显示数据，或者做其他处理
//       // 例如：
//       alert(`Row data: ${rowText}\nClicked column index: ${columnIndex}\nClicked cell data: ${cellText}`);
//     };
//     console.log('111' + config.data)
//
//     // const wsUrl = "ws://100.100.100.200:18081/websockets/aibangplc";
//     // const wsUrl = "ws://localhost:18081";
//     //
//     // const ws = new WebSocket(wsUrl);
//     //
//     // const updateScanEquipmentMsg = (data) => {
//     //   // 使用从WebSocket接收的数据更新scanEquipmentMsg
//     //   // 例如：
//     //   console.log(11111)
//     //   console.log(data)
//     //   if (data.scanEquipment_PlcPnStatus ) {
//     //     scanEquipmentMsg.scanEquipment_PlcPnStatus = data.scanEquipment_PlcPnStatus;
//     //     // console.log(scanEquipmentMsg.scanEquipment_PlcPnStatus)
//     //     console.log(22222)
//     //   }
//     //   if (data.scanEquipment_PlcErrStatus ) {
//     //     scanEquipmentMsg.scanEquipment_PlcErrStatus = data.scanEquipment_PlcErrStatus;
//     //   }
//     //   if (data.scanEquipment_PlcRealTimeStatus ) {
//     //     scanEquipmentMsg.scanEquipment_PlcRealTimeStatus = data.scanEquipment_PlcRealTimeStatus;
//     //   }
//     //
//     //   // 更新config.data
//     //   console.log(1)
//     //   config.data.splice(0);
//     //   console.log("Array length after splice: ", config.data.length); // 应为 0
//     //   console.log(22)
//     //
//     //   for (let i = 0; i < scanEquipmentMsg.scanEquipment_PlcPnStatus.length; i++) {
//     //     const pnStatus = scanEquipmentMsg.scanEquipment_PlcPnStatus[i] ? '离线' : '在线';
//     //     const errStatus = errStatusMapping[scanEquipmentMsg.scanEquipment_PlcErrStatus[i]] || '未知状态';
//     //     const realTimeStatus = realTimeStatusMapping[scanEquipmentMsg.scanEquipment_PlcRealTimeStatus[i]] || '未知状态';
//     //
//     //     const rowData = [`A${i + 1}`, pnStatus, `<span style="color: ${getStatusColor(scanEquipmentMsg.scanEquipment_PlcErrStatus[i])};" title="${errStatus}">${errStatus}</span>`, realTimeStatus];
//     //     config.data.push(rowData);
//     //
//     //   }
//     // }
//     //
//     // onMounted(() => {
//     //   ws.onopen = () => {
//     //     console.log("供包台WebSocket connection opened");
//     //   };
//     //
//     //   ws.onmessage = (event) => {
//     //     const data = JSON.parse(event.data);
//     //     // 假设每条消息包含scanEquipmentMsg对象中的一个字段
//     //     console.log('7',data.scanEquipmentMsg)
//     //     updateScanEquipmentMsg(data.scanEquipmentMsg);
//     //
//     //
//     //   };
//     //
//     //   ws.onclose = () => {
//     //     console.log("供包台WebSocket connection closed");
//     //   };
//     // });
//
//
//     // onUnmounted(() => {
//     //   ws.close(); // 确保在组件卸载时关闭WebSocket连接
//     // });
//
//     let websocket: WebSocket | null = null;
//
//     const initWebSocket = () => {
//       websocket = new WebSocket("ws://localhost:18081");
//
//       websocket.onopen = () => {
//         console.log("供包台WebSocket连接成功");
//       }
//
//       websocket.onmessage = (event) => {
//         const response = JSON.parse(event.data);
//         console.log("response", response)
//         if (response.scanEquipmentMsg.scanEquipment_PlcPnStatus) {
//           scanEquipmentMsg.scanEquipment_PlcPnStatus = response.scanEquipmentMsg.scanEquipment_PlcPnStatus;
//         }
//         if (response.scanEquipmentMsg.scanEquipment_PlcErrStatus) {
//           scanEquipmentMsg.scanEquipment_PlcErrStatus = response.scanEquipmentMsg.scanEquipment_PlcErrStatus;
//         }
//         if (response.scanEquipmentMsg.scanEquipment_PlcRealTimeStatus) {
//           scanEquipmentMsg.scanEquipment_PlcRealTimeStatus = response.scanEquipmentMsg.scanEquipment_PlcRealTimeStatus;
//         }
//
//         // 重新构建config.data以反映最新的状态
//         config.data.splice(0);
//         for (let i = 0; i < scanEquipmentMsg.scanEquipment_PlcPnStatus.length; i++) {
//           const pnStatus = scanEquipmentMsg.scanEquipment_PlcPnStatus[i] ? '离线' : '在线';
//           const errStatus = errStatusMapping[scanEquipmentMsg.scanEquipment_PlcErrStatus[i]] || '未知状态';
//           const realTimeStatus = realTimeStatusMapping[scanEquipmentMsg.scanEquipment_PlcRealTimeStatus[i]] || '未知状态';
//
//           const rowData = [`A${i + 1}`, pnStatus, `<span style="color: ${getStatusColor(scanEquipmentMsg.scanEquipment_PlcErrStatus[i])};" title="${errStatus}">${errStatus}</span>`, realTimeStatus];
//
//           console.log("7777", rowData)
//           config.data.push(rowData);
//           console.log("config.data", config.data)
//         }
//       }
//
//
//       websocket.onerror = (event) => {
//         console.log("供包台WebSocket连接发生错误");
//       }
//
//       websocket.onclose = (event) => {
//         console.log("WebSocket连接关闭");
//       }
//     }
//
//     onBeforeMount(() => {
//       initWebSocket();
//     })
//     onUnmounted(() => {
//       if (websocket) {
//         websocket.close();
//       }
//     });
//     // watchEffect 开始
//     // watchEffect(() => {
//     //   // 重新构建config.data以反映最新的状态
//     //   config.data.splice(0);
//     //   console.log("config.data cleared");
//     //
//     //   for (let i = 0; i < scanEquipmentMsg.scanEquipment_PlcPnStatus.length; i++) {
//     //     const pnStatus = scanEquipmentMsg.scanEquipment_PlcPnStatus[i] ? '离线' : '在线';
//     //     const errStatus = errStatusMapping[scanEquipmentMsg.scanEquipment_PlcErrStatus[i]] || '未知状态';
//     //     const realTimeStatus = realTimeStatusMapping[scanEquipmentMsg.scanEquipment_PlcRealTimeStatus[i]] || '未知状态';
//     //
//     //     const rowData = [`A${i + 1}`, pnStatus, `<span style="color: ${getStatusColor(scanEquipmentMsg.scanEquipment_PlcErrStatus[i])};" title="${errStatus}">${errStatus}</span>`, realTimeStatus];
//     //     config.data.push(rowData);
//     //     console.log("config.data", config.data)
//     //   }
//     //   console.log("config.data after update", config.data)
//     // });
//     // watchEffect 结束
//     return {config, scanEquipmentMsg, handleCellClick}
//   },
// })

export default {
  data() {
    return {
      config: {
        header: ['A#', 'pn', '报警', '实时'],
        data: [],
        rowNum: 10,
        headerHeight: 35,
        headerBGC: '#0f1325',
        oddRowBGC: '#0f1325',
        evenRowBGC: '#171c33',
        index: false,
        columnWidth: [55, 60, 130, 100],
        align: ['center'],
        waitTime: 2000,
      },
      list: JSON.parse(localStorage.getItem('listData') || '[]'),
      scanEquipmentMsg: {
        scanEquipment_PlcPnStatus: [true, false, true, false, false, false, false, false, true, false, false, false, false, false],
        scanEquipment_PlcErrStatus: [1, 1, 2, 12, 12, 1, 6, 7, 1, 1, 2, 2, 3, 4],
        scanEquipment_PlcRealTimeStatus: [17, 0, 17, 0, 16, 2, 4, 17, 3, 4, 32, 17, 17, 0],
      },
      websocket: null,

    };
  },
  methods: {
    getStatusColor(status) {
      const colorMap = {
        0:'white',
        1: 'green',
        2: 'yellow',
        3: 'red',
      };
      return colorMap[status] || 'red';
    },
    handleCellClick(event) {
      const {row, columnIndex, ceil} = event;

      console.log("121313131" + event)
      var dummyElement = document.createElement('div');
      dummyElement.innerHTML = row;
      var rowText = dummyElement.textContent || dummyElement.innerText;

      var dummyElementCell = document.createElement('div');
      dummyElementCell.innerHTML = ceil;
      var cellText = dummyElementCell.textContent || dummyElementCell.innerText;

      // 在这里你可以弹出一个窗口显示数据，或者做其他处理
      // 例如：
      alert(`Row data: ${rowText}\nClicked column index: ${columnIndex}\nClicked cell data: ${cellText}`);
    },
    initWebSocket() {
      this.websocket = new WebSocket("ws://100.100.100.200:18081/websockets/aibangplc");
      // this.websocket = new WebSocket("ws://localhost:18081")
      this.websocket.onopen = () => {
        console.log("供包台WebSocket连接成功");
      };

      this.websocket.onmessage = (event) => {
        const response = JSON.parse(event.data);
        console.log(response)
        Object.assign(this.scanEquipmentMsg, response.scanEquipmentMsg);
        this.buildData();
      };

      this.websocket.onerror = () => {
        console.log("供包台WebSocket连接发生错误");
      };

      this.websocket.onclose = () => {
        console.log("供包台WebSocket连接关闭");
      };
    },
    // buildData() {
    //   const errStatusMapping = ["正常", "急停", "一段光幕报警", "二段光幕报警", "一段伺服报警", "二段伺服报警", "三段伺服报警", "四段伺服报警"];
    //   const realTimeStatusMapping = ["一段有件", "二段有件", "三段有件", "四段有件", "一段光幕有件", "二段光幕有件"];
    //   this.config.data.splice(0);
    //   for (let i = 0; i < this.scanEquipmentMsg.scanEquipment_PlcPnStatus.length; i++) {
    //     const pnStatus = this.scanEquipmentMsg.scanEquipment_PlcPnStatus[i] ? '在线' : '离线';
    //     const errStatus = errStatusMapping[this.scanEquipmentMsg.scanEquipment_PlcErrStatus[i] % 10] || '未知状态';
    //     const realTimeStatus = realTimeStatusMapping[(this.scanEquipmentMsg.scanEquipment_PlcRealTimeStatus[i] % 10)]  || '未知状态';
    //     const color = this.getStatusColor(this.scanEquipmentMsg.scanEquipment_PlcErrStatus[i]);
    //     const rowData = [`A${i + 1}`, pnStatus, `<span style="color: ${color};" title="${errStatus}">${errStatus}</span>`, realTimeStatus];
    //     this.config.data.push(rowData);
    //     console.log(rowData)
    //     // this.config = {...this.config};//必不可少，不可省略
    //     this.$refs['scrollBoard'].updateRows(this.config.data)
    //
    //   }
    // }
    buildData() {
      const errStatusMapping = [
        "正常工作",
        "急停",
        "一段光幕报警",
        "二段光幕报警",
        "一段伺服报警",
        "二段伺服报警",
        "三段伺服报警",
        "四段伺服报警"
      ];
      const realTimeStatusMapping = [
        "一段有件",
        "二段有件",
        "三段有件",
        "四段有件",
        "一段光幕有件",
        "二段光幕有件"
      ];

      this.config.data.splice(0);
      for (let i = 0; i < this.scanEquipmentMsg.scanEquipment_PlcPnStatus.length; i++) {
        const pnStatus = this.scanEquipmentMsg.scanEquipment_PlcPnStatus[i] ? '在线' : '离线';

        // 获取错误状态的byte值并解析
        const errStatusByte = this.scanEquipmentMsg.scanEquipment_PlcErrStatus[i];
        let errStatus = [];

        if (errStatusByte === 0) {
          errStatus.push("无状态")
        } else {
          for (let bit = 0; bit < 8; bit++) {
            if (errStatusByte & (1 << bit)) {
              errStatus.push(errStatusMapping[bit] || '未知状态');
            }
          }
        }
        errStatus = errStatus.join(', ');

        // 获取实时状态的byte值并解析
        const realTimeStatusByte = this.scanEquipmentMsg.scanEquipment_PlcRealTimeStatus[i];
        let realTimeStatus = [];

        if (realTimeStatusByte === 0) {
          realTimeStatus.push("无状态");
        } else {
          for (let bit = 0; bit < 6; bit++) { // 假设你有6个可能的实时状态
            if (realTimeStatusByte & (1 << bit)) {
              realTimeStatus.push(realTimeStatusMapping[bit] || '未知状态');
            }
          }
        }

        realTimeStatus = realTimeStatus.join(', ');

        console.log("realTimeStatus", realTimeStatus)
        const color = this.getStatusColor(errStatusByte);
        const rowData = [`A${i + 1}`, pnStatus, `<span style="color: ${color};" title="${errStatus}">${errStatus}</span>`, realTimeStatus];
        this.config.data.push(rowData);
        // console.log(rowData);
        this.$refs['scrollBoard'].updateRows(this.config.data);
      }
    }

  },
  mounted() {
    this.buildData();
  },
  beforeMount() {
    this.initWebSocket();
  },
  beforeUnmount() {
    if (this.websocket) {
      this.websocket.close();
    }
  },
};

</script>

<style lang="scss" scoped>
$box-height: 410px;
$box-width: 300px;
.centerRight {
  padding: 16px;
  padding-top: 20px;
  height: $box-height+50px;
  width: $box-width;
  border-radius: 5px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
  }

  .body-box {
    border-radius: 10px;
    overflow: hidden;

    .dv-scr-board {
      width: 270px;
      height: 395px;
    }
  }

  .colorRed {
    color: red;
  }
}
</style>

